﻿@model IEnumerable<Aidbrella.Web.ViewModels.OrganizationViewModel>
@using System.Linq;
@using Aidbrella.Web;
@{
    ViewBag.Title = "Organizations";
}

<h5> >> Organizations</h5>


<div class="map" id='mapDiv'></div>

<script id="location-infobox-template" type="text/x-jquery-tmpl">

	</script>
   
	<script type="text/javascript">
		$(window).load(function () {
			var map = GetMap(document.getElementById("mapDiv"));

			var infoBox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), {visible: false});
			map.entities.push(infoBox);

            
             
			var points = @Model.SelectMany(m => m.ProjectLocations).ToJson();
			var locations = $.map(points, function (item) { return new Microsoft.Maps.Location(item.Location.Latitude, item.Location.Longitude); });
          
			$.each(points, function (idx, item) {
				var loc = new Microsoft.Maps.Location(item.Location.Latitude, item.Location.Longitude);
				var pin = new Microsoft.Maps.Pushpin(loc);

				Microsoft.Maps.Events.addHandler(pin, 'click', function () {
					infoBox.setOptions({visible: false});
					infoBox.setLocation(loc);
					infoBox.setOptions({title: item.Name, visible: true});
				});

				map.entities.push(pin);
			});

			var boundingRectangle = Microsoft.Maps.LocationRect.fromLocations(locations);
			map.setView({bounds: boundingRectangle});
		});
	</script>
